<template>
   <div class="container">
            <el-form :inline="true" :model="searchInfo" ref="searchInfo">
                <el-form-item label="应用名称">
                    <el-input
                            v-model="searchInfo.apps_name"
                            placeholder="请输入数据库名称"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-search"
                            @click="handleQuery"
                    >搜索</el-button>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="createDeployApp()">新增应用</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    row-key="ID"
                    @selection-change="handleSelectionChange"
                    border
                    ref="multipleTable"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column label="ID" width="50" align="center" prop="ID">
                    <template slot-scope="scope">{{scope.row.ID}}</template>
                </el-table-column>
                <el-table-column prop="apps_name" label="应用名称"/>
                <el-table-column prop="apps_type" label="应用类型">
                   <template slot-scope="scope">{{scope.row.apps_type | basecode(scope.row.apps_type,'apps_type')}}</template>
                </el-table-column>
                <el-table-column prop="gitlab_url" label="源代码地址" min-width="200"/>
                <el-table-column prop="branch_name" label="默认分支"/>
                <el-table-column prop="project.project_fullname" label="项目名称">
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                    <template slot-scope="scope">
                        <el-button @click="JumpRouter(scope.row)" icon="el-icon-edit" size="small" type="primary">配置</el-button>
                        <el-button @click="updateDeployApp(scope.row)" icon="el-icon-edit" size="small" type="primary">编辑</el-button>
                        <el-button @click="deleteDeployApp(scope.row)" type="danger" icon="el-icon-delete" style="margin-left: 6px;" size="mini" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]"
                    :style="{float:'right',padding:'20px'}"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
            <el-dialog :title="dialogTitle"  :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="800px"  @close="closeDialog">
                <el-form ref="appsForm" :model="formData" :rules="rules" size="medium" label-width="110px">
                    <el-row :gutter="10">
                        <el-col :span="20" :offset="2">
                            <el-col :span="24">
                                <el-form-item label="应用名称" prop="apps_name">
                                    <el-input
                                            v-model="formData.apps_name"
                                            prefix-icon="el-icon-info"
                                            placeholder="请输入应用名称"
                                            :disabled="apps_name_disabled"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="项目名称" prop="project_code" required>
                                    <el-input
                                            v-model="formData.project_code"
                                            prefix-icon="el-icon-info"
                                            placeholder="请输入应用名称"
                                            clearable
                                            disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="应用类型" prop="apps_type">
                                    <el-select  placeholder="请选择"  v-model="formData.apps_type" style="width:100%">
                                        <el-option
                                                v-for="dict in AppsTypeOptions"
                                                :key="dict.item_value"
                                                :label="dict.item_name"
                                                :value="dict.item_value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="代码地址" prop="gitlab_url" >
                                    <el-input v-model="formData.gitlab_url" prefix-icon="el-icon-info"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="分支名称" prop="branch_name">
                                    <el-input v-model="formData.branch_name" placeholder="请输入分支名称" prefix-icon="el-icon-info" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="dialog-footer" slot="footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button @click="enterDialog" type="primary">确 定</el-button>
                </div>
            </el-dialog>
        </div>
</template>

<script>
    import {
        getDeployAppList,
        createDeployApp,
        deleteDeployApp,
        updateDeployApp,
    } from "@/api/deploy_app";
    import infoList from '@/mixins/infoList'
    export default {
        name: "apply",
        mixins: [infoList],
        data() {
            return {
                EnvOptions: [],
                AppsTypeOptions: [],
                // 非单个禁用
                single: true,
                apps_name_disabled: false,
                multipleSelection: [],
                dialogFormVisible: false,
                dialogTitle: "新增应用",
                listApi: getDeployAppList,
                searchInfo: {
                    apps_name: null,
                    project_code:""
                },
                formData: {
                    apps_name: null,
                    gitlab_url: null,
                    branch_name: null,
                    project_code: null,
                    apps_type: null
                },
                rules: {
                    apps_name: [{ required: true, message: "请输入正确应用名称(只支持字母数字和-)", pattern: /^[a-zA-Z0-9|-]*$/,trigger: 'blur'}],
                    gitlab_url: [{ required: true, type: 'url', message: '输入合法的链接', trigger: 'blur' }],
                    branch_name: [{ required: true, message: "请输入分支名称", trigger: "blur"}],
                    project_code: [{ required: true, message: "请选择项目", trigger: "blur"}],
                    apps_type: [{ required: true, message: "请选择应用类型", trigger: "blur"}],
                }

            }
        },
        async created() {
            await this.getSearch(this.$route.query.projectCode)
            this.formData.project_code = this.$route.query.projectCode
        },
        methods: {
            //初始化查询数据
            async getSearch(params){
                this.searchInfo.project_code = params
                await this.getTableData();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.single = val.length !== 1
            },
            //页面跳转
            JumpRouter(row){
                this.$router.push({ path: 'configure', query: { appsName: row.apps_name,projectCode:row.project_code,appsType:row.apps_type }})
            },
            // 获取环境数据数据
            async getEnvData() {
                this.EnvOptions = this.getDicItemList('env_name')
            },
            // 项目搜索
            handleQuery() {
                this.getTableData()
            },
            async updateDeployApp(row) {
                this.dialogTitle = '编辑应用配置'
                this.apps_name_disabled = true
                this.type = "update";
                this.formData = row
                this.dialogFormVisible = true;
                this.AppsTypeOptions = this.getDicItemList('apps_type')
            },
            closeDialog(bool) {
                bool && this.getTableData()
                this.$refs['appsForm'].resetFields()
                this.dialogFormVisible = false
            },
            deleteDeployApp(row) {
                this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        this.visible = false;
                        const res = await deleteDeployApp({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            async enterDialog() {
                this.$refs['appsForm'].validate(async valid => {
                    if (!valid) return
                    let res;
                    switch (this.type) {
                        case "create":
                            res = await createDeployApp(this.formData);
                            this.closeDialog(true)
                            break;
                        case "update":
                            res = await updateDeployApp(this.formData);
                            this.closeDialog(true)
                            break;
                        default:
                            res = await createDeployApp(this.formData);
                            this.closeDialog(true)
                            break;
                    }
                    if (res.code == 0) {
                        this.$message({
                            type:"success",
                            message:"创建/更改成功"
                        })
                        this.closeDialog(true);
                        await this.getTableData();
                    }
                })

            },
            async createDeployApp(){
                this.dialogTitle = '新增应用配置'
                this.type = 'create';
                this.apps_name_disabled = false
                this.dialogFormVisible = true;
                this.formData ={
                    apps_name: null,
                    gitlab_url: null,
                    project_code: this.$route.query.projectCode,
                    branch_name: null,
                    apps_type: null
                }
                this.AppsTypeOptions = this.getDicItemList('apps_type')
            }
        },

    }

</script>

<style scoped>
    .container{
        width: calc(100% - 70px);
        position: absolute;
        top: 0;right:  0;
        background: #fff;
        border-radius: 0px 4px 4px 0px;
        padding: 20px 20px 0;
        height: 100%;
    }
</style>
